<!-- 订单统计 -->
<template>
    <div class="orderRecord">
        <div class="brand">
            <div class="header">订单统计</div>
            <!-- 条件筛选 -->
            <div class="screen">
                <div class>
                    <span class="demonstration">时间：</span>
                    <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="order.time" type="date" placeholder="选择日期" @change="getOrderDayCountList"></el-date-picker>
                </div>

                <div class style="float:right;margin-right:0">
                    <span class="demonstration">店铺：</span>
                    <el-select v-model="order.shop" filterable placeholder="请选择店铺" @change="getOrderDayCountList">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" max-height="500" min-height="200" border style="width: 100%">
                <el-table-column prop="shopName" label="店铺名称" width="150"></el-table-column>
                <el-table-column prop="0" label="0时" width="70"></el-table-column>
                <el-table-column prop="1" label="1时" width="70"></el-table-column>
                <el-table-column prop="2" label="2时" width="70"></el-table-column>
                <el-table-column prop="3" label="3时" width="70"></el-table-column>
                <el-table-column prop="4" label="4时" width="70"></el-table-column>
                <el-table-column prop="5" label="5时" width="70"></el-table-column>
                <el-table-column prop="6" label="6时" width="70"></el-table-column>
                <el-table-column prop="7" label="7时" width="70"></el-table-column>
                <el-table-column prop="8" label="8时" width="70"></el-table-column>
                <el-table-column prop="9" label="9时" width="70"></el-table-column>
                <el-table-column prop="10" label="10时" width="70"></el-table-column>
                <el-table-column prop="11" label="11时" width="70"></el-table-column>
                <el-table-column prop="12" label="12时" width="70"></el-table-column>
                <el-table-column prop="13" label="13时" width="70"></el-table-column>
                <el-table-column prop="14" label="14时" width="70"></el-table-column>
                <el-table-column prop="15" label="15时" width="70"></el-table-column>
                <el-table-column prop="16" label="16时" width="70"></el-table-column>
                <el-table-column prop="17" label="17时" width="70"></el-table-column>
                <el-table-column prop="18" label="18时" width="70"></el-table-column>
                <el-table-column prop="19" label="19时" width="70"></el-table-column>
                <el-table-column prop="20" label="20时" width="70"></el-table-column>
                <el-table-column prop="21" label="21时" width="70"></el-table-column>
                <el-table-column prop="22" label="22时" width="70"></el-table-column>
                <el-table-column prop="23" label="23时" width="70"></el-table-column>
            </el-table>
            <!-- <pagination v-show="order.total > 0" :total="order.total" :page.sync="order.pageNum" :limit.sync="order.pageSize" @pagination="getOrderDayCountList(1)" /> -->
            <pagination :autoScroll="false" style="text-align: center;margin-top: 30px;" v-show="order.total > 0" background :total="order.total" :page.sync="order.pageNum" :limit.sync="order.pageSize" @pagination="getOrderDayCountList" />
        </div>
        <div class="category scroll-container">
            <!-- 条件筛选 -->
            <div class="screen">
                <div class>
                    <span class="demonstration">时间：</span>
                    <el-date-picker v-model="yearOrder.time" format="yyyy" value-format="yyyy" @change="getOrderYearCountList" type="year" placeholder="选择年"> ></el-date-picker>
                </div>
                <!--缺少品类选择 -->
                <div class style="float:right;margin-right:0">
                    <span class="demonstration">店铺：</span>
                    <el-select v-model="yearOrder.shop" filterable placeholder="getShops" @change="getOrderYearCountList">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableDatas" max-height="500" min-height="200" border style="width: 100%" ref="gridTable">
                <el-table-column prop="shopName" label="店铺名称" width="180"></el-table-column>
                <el-table-column prop="01" label="1月" width="100"></el-table-column>
                <el-table-column prop="02" label="2月" width="100"></el-table-column>
                <el-table-column prop="03" label="3月" width="100"></el-table-column>
                <el-table-column prop="04" label="4月" width="100"></el-table-column>
                <el-table-column prop="05" label="5月" width="100"></el-table-column>
                <el-table-column prop="06" label="6月" width="100"></el-table-column>
                <el-table-column prop="07" label="7月" width="100"></el-table-column>
                <el-table-column prop="08" label="8月" width="100"></el-table-column>
                <el-table-column prop="09" label="9月" width="100"></el-table-column>
                <el-table-column prop="10" label="10月" width="100"></el-table-column>
                <el-table-column prop="11" label="11月" width="100"></el-table-column>
                <el-table-column prop="12" label="12月" width="100"></el-table-column>
            </el-table>

            <pagination :autoScroll="false" style="text-align: center;margin-top: 30px;" v-show="yearOrder.total > 0" background :total="yearOrder.total" :page.sync="yearOrder.pageNum" :limit.sync="yearOrder.pageSize" @pagination="getOrderYearCountList" />
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getOrderDayCount, getOrderYearCount, getShop } from '@/api/dateCenter';

export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'userRecord',
    components: {},
    data() {
        //这里存放数据
        return {
            // 筛选数据(商品,品牌,品类,单品)
            shop: {
                shop: '全部店铺' // 店铺
            },
            year: {
                shop: '全部店铺' // 店铺
            },
            // 订单
            order: {
                time: '', // 时间
                shop: null, // 店铺
                total: 0, // 总条数
                pageNum: 1, // 页码
                pageSize: 10 // 每页请求个数
            },
            // 品类
            yearOrder: {
                time: '', // 时间
                shop: null, // 店铺
                total: 0, // 总条数
                pageNum: 1, // 页码
                pageSize: 10 // 每页请求个数
            },
            options: [],
            tableData: [],
            tableDatas: [],
            options2: [],
            autoScroll: {
                type: Boolean,
                default: false
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        /** 查询申请额度记录列表 */
        getList() {},
        // 重置
        reset() {},
        /** 导出按钮操作 */
        handleExport() {
            // const queryParams = this.queryParams;
            // this.$confirm('是否确认导出订单数据项?', '警告', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // })
            //     .then(function() {
            //         return exportOrder(queryParams);
            //     })
            //     .then(response => {
            //         this.download(response.msg);
            //     })
            //     .catch(function() {});
        },

        // 订单按天统计下单数量
        getOrderDayCountList() {
            let datas = {
                size: this.order.pageSize,
                current: this.order.pageNum
            };
            if (this.order.time) {
                datas.date = this.order.time;
            }
            if (this.order.shop) {
                datas.shopId = this.order.shop;
            }
            getOrderDayCount(datas).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.order.total = res.data.total;
                }
            });
        },
        // 订单按年统计下单数量
        getOrderYearCountList() {
            let datas = {
                size: this.yearOrder.pageSize,
                current: this.yearOrder.pageNum
            };
            if (this.yearOrder.time) {
                datas.date = this.yearOrder.time;
            }
            if (this.yearOrder.shop) {
                datas.shopId = this.yearOrder.shop;
            }

            getOrderYearCount(datas).then(res => {
                if (res.code == 200) {
                    this.tableDatas = res.data.data;
                    this.yearOrder.total = res.data.total;
                }
            });

            let anchor = this.$refs.gridTable.offsetTop;
            // console.log(anchor);
            this.$nextTick(() => {
                document.querySelector(".scroll-container").scrollTop = anchor;
            });

        },
        // 获取店铺
        getShops() {
            getShop().then(res => {
                this.options = res.data;
                this.options.unshift({
                    id: null,
                    name: '全部店铺'
                });
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log();
        this.getShops();
        this.getOrderDayCountList();
        this.getOrderYearCountList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* //@import url(); 引入公共css类 */
.orderRecord {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    margin: 20px;
    border-radius: 4px;
    > div {
        margin-bottom: 60px;
    }
    .header {
        width: 100%;
        height: 40px;
        font-size: 18px;
        line-height: 26px;
        padding: 0 0 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #333;
        font-weight: 600;
        margin-top: 20px;
    }
    .screen {
        overflow: hidden;
        margin-top: 20px;
        height: auto;
        > div {
            float: left;
            margin: 0 20px 20px 0;
        }
        .btns {
            margin: 4px 0 20px 0;
        }
    }
    .commodity {
        .header + div {
            overflow: hidden;
            margin-top: 20px;
            > div {
                float: right;
            }
        }
    }
}
</style>
